<template>
  <div>
    <h1 style="text-align:center;">导入</h1>
     <el-upload
            class="upload-demo"
            :show-file-list='false'
            action
            accept=".xls,.xlsx"
            :on-change="onChange"
            :auto-upload='false'
            >
        <el-button size="small" type="primary">选择导入的文件</el-button>
        </el-upload>

         <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
            prop="year"
            label="年份"
            width="180">
        </el-table-column>
        <el-table-column
            prop="number"
            label="毕业人数"
            width="180">
        </el-table-column>
        </el-table>
  </div>
</template>

<script>
//导入 第三方模块 xlsx 导入文件 只读
import {utils,read} from 'xlsx'

export default {
  data () {
    return {
           tableData:[] 
     }
    },
  methods: {
       onChange(file,fileList) {
        console.log(file,fileList);
        
        // console.log(666);
        //要在这里读取选取的文件 - 将数据放在页面当中以tabl的形式展示  -- 依赖第三方模块
        
        //先读取file 的二进制数据信息 - 构造函数（FileReader）
       const fileReader = new FileReader()
       //将文件读取为二进制 读完之后得到二进制数据
       fileReader.readAsBinaryString(file.raw)

         //读取不到 异步在读取 读完之后才能获取到数据
       fileReader.onload = () => {
        //获取结果
            let fileData = fileReader.result
            // console.log(fileData);
            //将文件信息使用xlsx中的read的方法 读取为工作簿
           let book = read(fileData,{type:'binary'})
            //    console.log(book);
            //遍历工作簿中的所有工作表
           book.SheetNames.forEach((item,index) => {
            // console.log(item);
                    //获取对应的工作表内容
                    //只处理第一个工作表
                    if(index === 0){
                    let sheet = book.Sheets[item]
                    // console.log(sheet);
                    //将工作表内容转成json格式
                    let jsonData =  utils.sheet_to_json(sheet)
                    //   console.log(jsonData);
                    //将这个json转成我们熟悉的数据
                    this.tableData = jsonData.map(v => {
                        return {
                            year: v['年份'],
                            number: v['毕业人数']
                        }
                    })
              
                }
              })
           }
       }
    }
}
</script>

<style>
    
</style>
